<template>
  <div>
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="关键词:">
        <el-input v-model="form.keyword" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="类型:">
        <el-select v-model="form.type" placeholder="请选择">
          <el-option
            v-for="item in selectType"
            :label="item.label"
            :value="item.value"
            :key="item.label"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="发布时间:">
        <el-date-picker
          v-model="public_time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="warning" @click="add('add')">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="list" border stripe style="width: 100%">
      <el-table-column prop="ctime" label="发布时间" width="150" />
      <el-table-column prop="title" label="标题" width="500" />
      <el-table-column prop="type" label="新闻类型" width="130">
        <template #default="scope"> {{ typeMap(scope.row.type) }} </template>
      </el-table-column>
      <el-table-column prop="type" label="状态" width="200">
        <template #default="scope">
          <el-tag :type="handleStatusMap(scope.row.status).type">{{
            handleStatusMap(scope.row.status).title
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="url" label="外部链接" />
      <el-table-column fixed="right" label="操作" width="260px">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="add('detail', scope.row.id)"
            >预览</el-button
          >
          <el-button
            link
            type="primary"
            size="small"
            @click="add('edit', scope.row.id)"
            >编辑</el-button
          >
          <el-button
            link
            type="danger"
            size="small"
            v-if="scope.row.status === 0"
            @click="operation(scope.row.id, 1)"
            >通过</el-button
          >
          <el-button
            link
            type="danger"
            size="small"
            v-if="scope.row.status === 1"
            @click="operation(scope.row.id, 0)"
            >撤销发布</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-if="total !== 0"
      class="my-30px flex flex-justify-center flex-items-center"
      background
      layout="prev, pager, next"
      :total="total"
      page-size="10"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElNotification, dayjs } from "element-plus";
import { selectType, typeMap, handleStatusMap, department_type } from "./data.config";
import { manage_news_list, operation_news } from "@/api/back/news";

const $router = useRouter();
const public_time = ref(["", ""]);
const total = ref(0);

const form = reactive({
  keyword: "",
  type: "",
  ctime_start: "",
  ctime_end: "",
  page: "1",
  page_size: "10",
  department_type: "",
});

const list = ref([]);
const $route = useRoute();

watch(
  () => public_time.value,
  (val) => {
    if (val) {
      public_time.value = val;
      form.ctime_start = dayjs(val[0]).format("YYYY-MM-DD");
      form.ctime_end = dayjs(val[1]).format("YYYY-MM-DD");
    } else {
      public_time.value = val;
      form.ctime_start = "";
      form.ctime_end = "";
      news_list();
    }
  }
);

watch(
  () => $route.fullPath,
  (newValue: any) => {
    news_list();
  }
);

const news_list = async () => {
  const {
    data: { data, total: totalNumber },
  } = await manage_news_list(form);
  list.value = data.map((item, index)=>{
    return ({
      ...item,
      department_type: department_type[index % 5]
    })
  });
  total.value = totalNumber;
};
news_list();

const search = () => {
  news_list();
};

const add = (type = "", id = "") => {
  $router.push({
    path: "/back/info/detail",
    query: {
      type,
      id,
    },
  });
};

const operation = async (id, status) => {
  const { code } = await operation_news({ id, operation: status });
  if (code === 200) {
    ElNotification({
      type: "success",
      title: "操作成功",
    });
    news_list();
  } else {
    ElNotification({
      type: "error",
      title: "操作失败",
    });
  }
};

// 分页处理
const handleCurrentChange = (val: number) => {
  form.page.value = val;
  news_list();
  // document.querySelector("html").scrollTop = 0;
};
</script>

<style scoped lang="scss">
:deep .el-form-item__label {
  font-size: 18px;
}
:deep .el-table th.el-table__cell {
  font-size: 18px;
}
:deep .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  font-size: 16px;
}
:deep .el-button > span {
  font-size: 16px;
}
:deep .el-tag {
  font-size: 16px;
}
</style>
